<template>
  <div id="order">
    <div class="topbg">
      <div class="address">
        <van-button
          plain
          type="warning"
          v-if="mainAddr.length == 0"
          @click="goAddAddr"
          >暂无地址，点击添加</van-button
        >
        <div v-else @click="goAddAddr">
          <p class="row1">
            <span>
              {{ mainAddr[0].username }}
            </span>
            <span>
              {{ mainAddr[0].userphone | telformat }}
            </span>
          </p>
          <p class="row2">
            {{ mainAddr[0].location }}{{ mainAddr[0].useraddress }}
          </p>
        </div>
      </div>
    </div>
    <div class="list">
      <div v-for="item in orderList" :key="item.id">
        <template>
          <div class="cartitem">
            <div class="imgbox">
              <img :src="item.img" alt="" class="itemimg" />
            </div>
            <div class="textbox">
              <div class="box1">
                <p class="title">{{ item.goodsname }}</p>
                <p class="info">{{ item.goodsname }}</p>
              </div>
              <div class="box2">
                <span class="price">{{ item.price }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="tlist">
        <van-cell title="发票类型" is-link value="不开发票" />
        <van-cell title="售后免邮" value="部分商家赠送" />
        <van-cell
          title="买家留言"
          value="填写内容需要与商家协商并确认，45字以内"
          value-class="value"
        />
      </div>
    </div>
    <div class="bottom">
      <van-submit-bar
        :price="sumprice"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapActions, mapGetters } from "vuex";
import { GetMAddr, GetOneAddr, Order } from "../util/request/api";
export default {
  data() {
    return {
      orderList: [],
      mainAddr: [],
      ordernum: "",
    };
  },
  methods: {
    goAddAddr() {
      this.$router.push("/addr");
    },
    onSubmit() {
      let obj = {
        uid: this.uid,
        countmoney: this.sumprice / 100,
        countnumber: this.orderList[0].num,
        addressid: this.mainAddr[0].id,
        idstr: this.cartidset,
      };
      if (obj.idstr == "") {
        obj.idstr = this.orderList[0].cartid;
      }
      Order(obj)
        .then((res) => {
          if (res.code != 200) {
            Toast(res.msg + "111");
            return;
          }
          this.changeCostAction({
            id: res.list.outTradeNo,
            money: obj.countmoney,
          });
          this.$router.push("/pay");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    ...mapActions(["changeCostAction"]),
  },
  mounted() {
    this.orderList = this.getOrderList;
    if (this.getChosenAddr == 0) {
      GetMAddr(this.uid)
        .then((res) => {
          if (res.list == null) {
            this.mainAddr = [];
            return;
          }
          this.mainAddr = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      GetOneAddr(this.uid, this.getChosenAddr)
        .then((res) => {
          if (res.list == null) {
            this.mainAddr = [];
            return;
          }
          this.mainAddr = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
  computed: {
    ...mapGetters(["getOrderList", "getChosenAddr", "getCost"]),
    sumprice: function () {
      let sum = 0;
      this.orderList.forEach((item) => {
        sum += item.price;
      });
      return sum * 100;
    },
    sumnumber: function () {
      let sum = 0;
      this.orderList.forEach((item) => {
        sum += item.num;
      });
      return sum;
    },
    cartidset: function () {
      let arr = [];
      this.orderList.forEach((item) => {
        arr.push(item.id);
      });
      return arr.join(",");
    },
    uid: function () {
      return JSON.parse(sessionStorage.getItem("user")).uid;
    },
  },
  filters: {
    telformat: function (value) {
      let arr = value.split("");
      arr.splice(3, 4, "****");
      value = arr.join("");
      return value;
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/order.css");
</style>